<template>
  <div class="popup">
    <p class="title">{{detail.title}}</p>
    <scroll>
      <div class="box">
        <div class="item">
          <span class="iconfont iconxingmingyonghumingnicheng"></span>
          <span>{{detail.nickname}}</span>
        </div>
        <div class="item">
          <span class="iconfont iconbuoumaotubiao24"></span>
          <span>{{formatTime(detail.time)}}</span>
        </div>
      </div>
      <div class="box">
        <div class="item">
          <span class="iconfont icongongsi-"></span>
          <span>{{detail.firm}}</span>
        </div>
        <div class="item">
          <span class="iconfont iconzhiwei-"></span>
          <span>{{detail.position}}</span>
        </div>
        <div class="item">
          <span class="iconfont iconchengshi"></span>
          <span>{{detail.city}}</span>
        </div>
      </div>
      <div class="box">
        <div class="item">
          <span>工作经验：</span>
          <span>{{detail.workInfo[0].workYear ? detail.workInfo.length : 0}}</span>
        </div>
      </div>
      <el-table
        :data="detail.workInfo"
        style="width: 100%"
        v-if="detail.workInfo[0].workYear"
      >
        <el-table-column
            prop="workYear"
            label="经验"
        />
        <el-table-column
              prop="previousFirm"
            label="曾任职公司"
        />
        <el-table-column
            prop="previousPost"
            label="曾任职岗位"
        />
      </el-table>
      <div class="box">
        <div class="item">
          <span>面试次数：</span>
          <span>{{detail.interviewDetail[0].interviewType ? detail.interviewDetail.length : 0}}</span>
        </div>
      </div>
      <el-table
          :data="detail.interviewDetail"
          style="width: 100%"
          v-if="detail.interviewDetail[0].interviewType"
      >
        <el-table-column
            prop="interviewType"
            label="类型"
        />
        <el-table-column
            prop="interviewTime"
            label="时长"
        />
        <el-table-column
            prop="questionList.length"
            label="问答数量"
        />
      </el-table>
      <div class="conclude">
        <span>面试总结：</span>
        <span>{{detail.interviewConsole || '该用户很懒，没有留下总结~'}}</span>
      </div>
    </scroll>
    <div class="button-group" v-if="detail.verifiedStatus === -1">
        <a-button-group>
          <a-space>
            <a-button @click="verify(0)">审核不通过</a-button>
            <a-button type="primary" @click="verify(1)">审核通过</a-button>
          </a-space>
        </a-button-group>
    </div>
    <span class="el-icon-circle-close" @click="close"></span>
  </div>
</template>

<script>
import scroll from '../scroll/Scroll';
import { formatTime } from "@/common/Utils";

export default {
  name: "Popup",

  data() {
    return {}
  },

  props: {
    detail: {
      type: Object
    }
  },

  components: {
    scroll
  },

  methods: {
    formatTime(time) {
      return formatTime(new Date(time));
    },

    close() {
      this.$emit('close');
    },

    verify(status) {
      const params = {
        articleId: this.detail.articleId,
        status
      }
      this.$emit('verify', params);
    }
  }
}
</script>

<style lang="less">
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 500px;
    padding: 50px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0, .1);
    box-sizing: border-box;
    border-radius: 10px;

    .title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      padding-bottom: 20px;
    }

    .scroll {
      width: 100%;
      height: calc(100% - 100px);
      margin-bottom: 10px;

      .el-table {
        padding-top: 10px;
      }

      .box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        text-align: left;
        //justify-content: space-between;
        font-size: 16px;
        font-weight: 500;
        padding-top: 30px;

        .item span:first-child {
          font-weight: 600;
        }

        .iconfont {
          padding-right: 6px;
        }
      }

      .conclude {
        display: flex;
        padding: 30px 6px 30px 0;
        font-size: 16px;

        span:first-child {
          font-weight: 600;
          width: 160px;
        }
      }
    }

    .el-icon-circle-close {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10001;
      font-size: 18px;
      color: #8F9395;
    }

    .button-group {
      .ant-btn-group {
        margin-top: 16px;
      }
    }

    .el-icon-circle-close:hover {
      color: #002766;
      cursor: pointer;
    }
  }
</style>